<script setup > 
import { inject, onMounted } from "vue";
import soilCard from "../../components/card/soilCard.vue";

let echart = inject("echart");

onMounted(() => {
  drawSoilParams();

  drawCfDosage();

  drawOfCombination();
});
function drawSoilParams() {
  let soilChart = echart.init(document.getElementById("soilParam"));

  const option = {
    color: ["#4b8f10", "#E6A23C"],
    title: {
      text: "",
    },
    legend: {
      data: ["样本土地", "采样平均"],
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: "pH", max: 7 },
        { name: "有机质(g/kg)", max: 40 },
        { name: "水解性氮", max: 120 },
        { name: "有效磷", max: 60 },
        { name: "速效钾", max: 300 },
        { name: "氯离子", max: 30 },
        { name: "交换性钙", max: 2000 },
        { name: "有效硼", max: 2 },
        { name: "有效锌", max: 3 },
        { name: "有效锰", max: 35 },
        { name: "有效铁", max: 45 },
        { name: "交换性镁", max: 300 },
        { name: "有效铜", max: 4 },
        { name: "全氮(g/kg)", max: 2.5 },
      ],
    },
    series: [
      {
        name: "",
        type: "radar",
        data: [
          {
            value: [
              5.38, 23.4, 99.5, 42.1, 223, 9.5, 1592, 0.91, 1.45, 32.37, 41.1,
              174, 3.61, 1.22,
            ],
            name: "样本土地",
            lineStyle: {
              color: "#4b8f10",
            },
          },
          {
            value: [
              5.8, 24, 100, 45, 240, 9.2, 1580, 0.95, 1.5, 30, 36, 180, 3.2,
              1.3,
            ],
            name: "采样平均",
            areaStyle: {
              color: "#E6A23C",
            },
            lineStyle: {
              color: "#E6A23C",
            },
            symbol: "none",
          },
        ],
      },
    ],
  };

  option && soilChart.setOption(option);
}

function drawCfDosage() {
  let cfChart = echart.init(document.getElementById("cfCombination"));

  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: ["云78", "云121", "K236", "NC297", "红大"],
    },
    series: [
      {
        name: "N",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [7, 7, 7, 7, 4],
      },
      {
        name: "P2O5",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [7, 7, 7, 7, 4],
      },
      {
        name: "K2O",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [18.9, 18.9, 18.9, 18.9, 18],
      },
    ],
  };

  option && cfChart.setOption(option);
}

function drawOfCombination() {
  let ofChart = echart.init(document.getElementById("ofCombination"));
  let option = {
    title: {
      text: "有机肥替氮施用对比",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        snap:true,
      },
    },
    legend: {
      data: ["腐熟农家肥", "绿肥(苕子)", "油枯饼肥", "秸秆还田"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "value",
      // data: ["0","640", "1600",],
      name: "施用量（Kg/亩）",
      splitNumber: 10,
      axisLine: {
        show: true,
      },
    },
    yAxis: {
      type: "value",
      name: "替氮量（Kg/亩）",
      alignTicks: true,
      axisLine: {
        show: true,
      },
    },
    series: [
      {
        name: "腐熟农家肥",
        type: "line",
        data: [
          [0, 0],
          [640, 1.28],
          [1600, 3.2],
        ],
      },
      {
        name: "绿肥(苕子)",
        type: "line",
        data: [
          [0, 0],
          [640, 0.32],
          [1600, 0.8],
        ],
      },
      {
        name: "油枯饼肥",
        type: "line",
        data: [
          [0, 0],
          [640, 0.8],
          [1600, 2],
        ],
      },
      {
        name: "秸秆还田",
        type: "line",
        data: [
          [0, 0],
          [640, 0.4],
          [1600, 1],
        ],
      },
    ],
  };
  option && ofChart.setOption(option);
}
</script>

<template>
  <el-row class="card-con">
    <soilCard />
    <el-col :span="12" style="height: 100%;">
      <div class="charts-list">
        <div id="soilParam"></div>
        <div id="cfCombination"></div>
        <div id="ofCombination"></div>
      </div>
    </el-col>
  </el-row>

</template>

<style scoped lang="scss">
.card-con {
  height: 100%;
}
.charts-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  #soilParam {
    width: 50%;
    height: 50%;
  }

  #ofCombination {
    width: 100%;
    height: 50%;
    background-color: #f5f4f4;
  }

  #cfCombination {
    width: 50%;
    height: 50%;
    background-color: #ebebeb;
  }
}
</style>
